<template>
  <div class="second-page">
    <ComTopNum/>
    <div class="center-box">
      <div class="center-box-left">
        <ComNavTab text="昨日启动终端地区分布"/>
        <ComMap echartId="TmsthirdPlacePage" 
                style="width:750px;height:86%;" 
                :data="centerMapData"
                :showTipText="{'text1':'活跃总量', 'text2':'近期活跃'}"/>
      </div>
      <div class="center-box-right">
        <ComNavTab text="昨日启动终端地区排名"/>
        <ComBaseEcharts echartId="getOptionsForRankBarRefthird"
                         :options="getOptionsForRankBarRef"
                         :customStyle="{width: '100%', height: '90%'}"/>
      </div>
    </div>
    <div class="bottom-box">
        <ComNavTab text="地域终端激活详细统计"/>
        <com-table
            style="z-index: 3"
            scrollHeight="440px"
            :isIndex="false"
            :colorKey="['percentageForPast30Days','percentageForPast7Days','percentageForYesterday']"
            :listData="appStartList"
            :hederTextArray="[
                { title: '地区', width: '12.5%' },
                { title: '累计激活', width: '12.5%' },
                { title: '近30天活跃', width: '12.5%' },
                { title: '近30天开机率', width: '12.5%' },
                { title: '近7天活跃', width: '12.5%' },
                { title: '近7天开机率', width: '12.5%' },
                { title: '昨天活跃', width: '12.5%' },
                { title: '昨天开机率', width: '12.5%' },
            ]"
            :tableTextArray="[
              'areaName',
              'totalActiveTerms',
              'activeTermsForPast30Days',
              'percentageForPast30Days',
              'activeTermsForPast7Days',
              'percentageForPast7Days',
              'activeTerms',
              'percentageForYesterday',
            ]"
            ></com-table>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, onUnmounted } from "vue";
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComMap from '@/components/public/ComMap.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForRankBar } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComTopNum from '@/views/tms/components/ComTopNum.vue'
  import { getToday} from '@/utils/func/util'
  import { getArea } from '@/api/tms/tms.js'

  const intervalId = ref(null);
  const centerMapData = ref([])
  const getOptionsForRankBarRef = ref(getOptionsForRankBar([]))
  //应用启动
  const appStartList = ref([])
  const loaddMapData = () => { 
    getArea({statDate: getToday()}).then(res => {
      const { data } = res
      if(data.length > 0){
        centerMapData.value = data.map(item => ({
          name: item.areaName,
          value: item.startups,//昨天启动总量
          today: item.activeTerms //昨天活跃终端
        }))
        //tms激活终端排行数据top10
        const rankData = data.slice(0, 10)
        rankData.sort((a, b) => {
          return b.startups - a.startups
        })
        const yLabel = rankData.map(v => v.areaName)
        const yData = rankData.map(v => v.startups)
        getOptionsForRankBarRef.value = getOptionsForRankBar([], yData, yLabel)

        //表格展示
        let tabData = data.map(v => {
          return {
            areaName: v.areaName,
            totalActiveTerms: v.totalActiveTerms.toLocaleString(),
            activeTermsForPast30Days: v.activeTermsForPast30Days.toLocaleString(),
            percentageForPast30Days: v.percentageForPast30Days,
            activeTermsForPast7Days: v.activeTermsForPast7Days.toLocaleString(),
            percentageForPast7Days: v.percentageForPast7Days,
            activeTerms: v.activeTerms.toLocaleString(),
            percentageForYesterday: v.percentageForYesterday
          }
        })
        appStartList.value = tabData
      }
    })
  }
  onMounted(() => {
    loaddMapData()
  })
  //5分钟刷新数据-累计应用总量/地图/今日应用总量
  intervalId.value = setInterval(() => {
    loaddMapData()
  }, 5 * 1000 * 60)

  onUnmounted(() => {
  // 清除定时器
  if (intervalId.value) {
      clearInterval(intervalId.value);
    }
  });   
</script>
<style lang="scss" scoped>
.second-page {
  padding: 0 40px 60px 40px;
  .center-box{
    display: flex;
    height: 500px;
    // padding-top: 25px;
    background-image: url('/src/assets/BG2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-left{
      width: 50%;
    }
    &-right{
      width: 50%;
      margin-left:20px;
    }
  }
  .bottom-box{
    height: 500px;
  }
}
</style>
